<template>
  <div class="main">
    <div class="left-wrap">
      <div class="profile">
        <div class="task">
          <div class="task-item">
            <div class="count">0</div>
            <div class="title">我的待办</div>
          </div>
          <div class="task-item">
            <div class="count todo">0</div>
            <div class="title">我的已办</div>
          </div>
          <div class="task-item">
            <div class="count warning">0</div>
            <div class="title">我发起的</div>
          </div>
          <div class="task-item">
            <div class="count end">0</div>
            <div class="title">我的办结</div>
          </div>
        </div>
        <div class="message-notice">
          <div><img src="@/assets/notice.png" alt="" style="width: 20px; height: 20px; margin-right: 5px;">消息通知(0)</div>
        </div>
      </div>
      <div class="work-notice">
        <div class="title-row">
          <div class="title">工作通知</div>
          <div class="more-box">
            <div class="more">更多</div>
            <img src="@/assets/more.png" class="arrow">
          </div>
        </div>
        <div class="swiper">
          <el-carousel trigger="click" height="150px">
            <el-carousel-item>
              <img src="http://warehouse-api.lanbeiduo.com/api/file/download/BHFtLyokV0_swiper1.jpg" class="img">
            </el-carousel-item>
            <el-carousel-item>
              <img src="http://warehouse-api.lanbeiduo.com/api/file/download/aWTUNqsMVd_swiper2.png" class="img">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="work-notice-list">
          <div class="notice-item">
            <div class="text-box"><img src="@/assets/work-notice.png" alt=""
                style="width: 15px; height: 15px; margin-right: 5px;">
              <div class="text">“公房在线”应用开发处于集中攻坚阶段，平台会出现不稳定现象。</div>
            </div>
            <div class="date">01-13</div>
          </div>
          <div class="notice-item">
            <div class="text-box"><img src="@/assets/work-notice.png" alt=""
                style="width: 15px; height: 15px; margin-right: 5px;">
              <div class="text">天气提醒</div>
            </div>
            <div class="date">01-09</div>
          </div>
        </div>
      </div>
      <div class="fileDownload">
        <div class="title-row">
          <div class="title">工作通知</div>
          <div class="more-box">
            <div class="more">更多</div>
            <img src="@/assets/more.png" class="arrow">
          </div>
        </div>
        <div class="fileList">
          <div class="item">
            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/1neWcutO5V_file1.png" alt="">
            <p class="text">维修管理操作说明.doc</p>
          </div>
          <div class="item">
            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/1neWcutO5V_file1.png" alt="">
            <p class="text">维修管理操作说明.doc</p>
          </div>
          <div class="item">
            <img src="http://warehouse-api.lanbeiduo.com/api/file/download/1neWcutO5V_file1.png" alt="">
            <p class="text">维修管理操作说明.doc</p>
          </div>
        </div>
      </div>
    </div>
    <div class="middle-plate">
      <div class="right-top">
        <div class="user-info">
          <img v-if="userInfo && userInfo.personalSignature" :src="userInfo.personalSignature" class="avator">
          <img v-else src="@/assets/noBody.png" class="avator">
          <div class="text-row">
            <div class="unitName"><span>{{ userInfo && userInfo.nickName }}</span>
              <div>鄂州市</div>
            </div>
            <p>欢迎登录重庆公房在线系统 </p>
          </div>
        </div>
      </div>
      <div class="column-con">
        <div class="more-row">
          <div class="title">常用应用</div>
          <div class="more" @click="toMyApp">
            <el-icon color="#3c4a7d">
              <EditPen />
            </el-icon>
            <div>自定义</div>
          </div>
        </div>
        <div class="work-plate">
          <div class="work-draggable">
            <div class="work-item cursor-pointer" v-for="item in cyyyData">
              <div class="mask">
                <img src="http://warehouse-api.lanbeiduo.com/api/file/download/pASFWTvZlh_close.png" alt="" class="close">
              </div>
              <div class="work-item-content">
                <img :src="item.ico" alt="" class="img">
                <div class="work-title">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column-con">
        <div class="more-row">
          <div class="title">办事大厅</div>
          <!-- <div class="more">
            <el-icon color="#3c4a7d">
              <EditPen />
            </el-icon>
            <div>自定义</div>
          </div> -->
        </div>
        <div class="work-plate">
          <div class="work-draggable">
            <div class="work-item cursor-pointer" v-for="item in bsdtData">
              <div class="mask">
                <img src="http://warehouse-api.lanbeiduo.com/api/file/download/pASFWTvZlh_close.png" alt="" class="close">
              </div>
              <div class="work-item-content">
                <img :src="item.ico" alt="" class="img">
                <div class="work-title">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  getAllApplication
} from '@/api/xitongpeizhi'
import { computed, ref,onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
defineOptions({
  name: 'Dashboard'
})
const router = useRouter()
const userInfo = ref({})
if (localStorage.getItem('userInfo')) {
  userInfo.value = JSON.parse(localStorage.getItem('userInfo'))
}
const cyyyData = ref([])
const bsdtData = ref([])
onMounted(()=>{
  getYyData()
})
const getYyData = async () => {
  const res = await getAllApplication()
  if (res.code == 200) {
    cyyyData.value = res.result.filter(item=>item.type=='常用应用')
    bsdtData.value = res.result.filter(item=>item.type=='办事大厅')
  }
}
function toMyApp(){
  router.push({ name: 'myApp'})
}
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  margin: 4px;

  .left-wrap {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 30rem;
    height: 100%;
    margin-right: 1.125rem;

    .profile {
      width: 100%;
      height: auto;
      background: #fff;
      border-radius: .3125rem;
      margin-bottom: 1rem;
      padding: 1.25rem;

      .task {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 7.5rem;

        .task-item {
          text-align: center;
          cursor: pointer;

          .count {
            font-size: 2rem;
            font-family: DIN Alternate-Bold, DIN Alternate;
            font-weight: 700;
            color: #2f4cc9;
            margin-bottom: .625rem;
          }

          .title {
            font-size: 1.125rem;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #666;
          }

          .todo {
            color: #1fb197;
          }

          .warning {
            color: #ff6824;
          }

          .end {
            color: #1ea171;
          }
        }
      }

      .message-notice {
        width: 26.75rem;
        height: 3.75rem;
        background: #f0f4fb;
        display: flex;
        justify-content: center;
        align-items: center;

        div {
          user-select: none;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 1.125rem;
          color: #2382f1;
        }
      }
    }

    .work-notice {
      width: 100%;
      height: 23.5625rem;
      padding: 1.4375rem 1.875rem .625rem;
      box-sizing: border-box;
      background: #fff;
      border-radius: .3125rem;

      .swiper {
        margin-top: 6px;

        .img {
          height: 100%;
          width: 100%;
        }
      }

      .work-notice-list {
        margin-top: .8125rem;

        .notice-item {
          height: 2.625rem;
          line-height: 2.625rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 1rem;
          font-family: PingFang SC-Regular\, PingFang SC;
          font-weight: 400;
          color: #333;
          cursor: pointer;

          .text-box {
            max-width: 20rem;
            display: flex;
            align-items: center;

            .text {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }

  .fileDownload {
    width: 100%;
    height: auto;
    background: #fff;
    border-radius: .3125rem;
    margin-top: 1rem;
    padding: 1.25rem;

    .fileList {
      display: flex;
      margin-top: .3125rem;
      justify-content: space-around;

      .item {
        width: 30%;
        background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff);
        box-shadow: 0 .75rem 1.3125rem 1px rgba(20, 29, 95, .07);
        border-radius: .625rem .625rem .625rem .625rem;
        border: 1px solid #ebeef5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: .625rem 0 .625rem 0;

        .text {
          width: 70%;
          text-align: center;
        }
      }
    }
  }

  .title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 1.375rem;
      color: #333;
      line-height: 1.625rem;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .more-box {
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .more {
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 1rem;
      color: #999;
      line-height: 1.1875rem;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .arrow {
      width: 8px;
      height: 8px;
      margin-left: 2px;
    }
  }

  .middle-plate {
    flex: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-size: 100% 100%;

    .right-top {
      width: 100%;
      height: 12.5rem;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 1.25rem 3rem;
      background: url("http://warehouse-api.lanbeiduo.com/api/file/download/gH4vGT2Suq_home_right_bg.png");
      background-size: cover;
      background-position: 50%;

      .user-info {
        display: flex;
        align-items: center;

        .avator {
          width: 80px;
          height: 80px;
        }

        .text-row {
          margin-left: 1.25rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;

          .unitName {
            display: flex;
            align-items: center;
            flex-direction: row;
            margin-bottom: 1.125rem;

            div {
              padding: 0 .3125rem;
              height: 1.625rem;
              line-height: 1.625rem;
              border-radius: 3px;
              border: 1px solid #1343e8;
              font-family: PingFang SC\, PingFang SC;
              font-weight: 500;
              font-size: .875rem;
              color: #1343e8;
              margin-left: .5rem;
            }

            span {
              font-family: PingFang SC\, PingFang SC;
              font-weight: 500;
              font-size: 1.5rem;
              color: #0a1f35;
            }
          }

          p {
            font-family: PingFang SC\, PingFang SC;
            font-weight: 400;
            font-size: 1.125rem;
            color: #697c87;
          }
        }
      }
    }

    .column-con {
      width: 100%;
      height: auto;
      padding: 1.25rem 1.875rem;
      box-sizing: border-box;

      .more-row {
        height: 1.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
          font-size: 1.375rem;
          font-family: PingFang SC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333;
        }

        .more {
          display: flex;
          align-items: center;
          font-size: 1.125rem;
          font-family: PingFang SC-Semibold, PingFang SC;
          font-weight: 600;
          color: #3c4a7d;
          cursor: pointer;
        }
      }

      .work-plate {
        width: 100%;
        padding: 1.25rem 0 0;
        box-sizing: border-box;

        .work-draggable {
          display: flex;
          flex-wrap: wrap;

          .work-item {
            position: relative;
            width: 23%;
            height: 6.875rem;
            background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff);
            box-shadow: 0 .5rem 1.3125rem 1px rgba(6, 43, 98, .1);
            border-radius: .625rem;
            margin-right: 1.75rem;
            margin-bottom: 1.25rem;
            padding-left: 1.375rem;
            box-sizing: border-box;
            transform: translateZ(.625rem);
            display: flex;
            align-items: center;

            .work-item-content {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              padding-left: 1.375rem;
              box-sizing: border-box;
              display: flex;
              align-items: center;

              .work-title {
              margin-left: 6px;
                text-align: left;
                font-size: 1.25rem;
                font-family: PingFang SC-Semibold, PingFang SC;
                font-weight: 500;
                color: #445263;
                line-height: 1.4375rem;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
              }

              .img {
                width: 50px;
                height: 50px;
              }
            }

            .mask {
              display: none;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, .3);
              box-shadow: 0 4px 1.5rem 0 rgba(0, 0, 0, .1);
              border-radius: .625rem .625rem .625rem .625rem;
              z-index: 999;

              .close {
                position: absolute;
                top: .625rem;
                right: .625rem;
                width: 1.75rem;
                height: 1.75rem;
                background: #f5f6f6;
                border-radius: 2px 2px 2px 2px;
              }
            }
          }

          .work-item:hover .mask {
            display: block;
          }

          .cursor-pointer {
            cursor: pointer;
          }
        }
      }
    }
  }

  :deep .el-carousel__indicators {
    left: unset;
    transform: unset;
    right: 2%;
  }

  :deep .el-carousel__button {
    width: 10px;
    height: 10px;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
  }

  :deep .is-active .el-carousel__button {
    background: #f7c173;
  }
}
</style>
